{include file="common/top" /}
<style>
html{
	background: #ffffff;
}
</style>
<form class="layui-form " action="" style="    background: #fff;">
	<div class="layui-form-item">
		<label class="layui-form-label">群名称：</label>
		<div class="layui-col-xs4">
			<input type="text" name="name" value=""  lay-verify="required" autocomplete="off" class="layui-input">
		</div>
		<label class="layui-form-label">群主：</label>
		<div class="layui-col-xs4">
			<select name="owner"  autocomplete="off" lay-filter="aihao">
				<option value="">请选群主</option>
				{volist name="user_list" id='vo'}
					<option value="{$vo.id}">{$vo.username}</option>
				{/volist}
			</select>
		</div>
    </div>
    <!-- <div class="layui-form-item">
		<label class="layui-form-label">群主：</label>
		<div class="layui-col-xs4">
			<select name="owner"  autocomplete="off" lay-filter="aihao">
				<option value="">请选群主</option>
				{volist name="user_list" id='vo'}
					<option value="{$vo.id}">{$vo.username}</option>
				{/volist}
			</select>
		</div>
	</div> -->
	<hr/>
	<div class="layui-form-item">
		<label class="layui-form-label">公司人员：</label>
		<div class="layui-col-xs5">
			&nbsp
		</div>
		<label class="layui-form-label">绑定端口：</label>
		<div class="layui-col-xs4">
			&nbsp
		</div>
	</div>
	<div class="layui-form-item">
		<div class="layui-col-xs6">
			<div id="test4" class="demo-transfer"></div>
		</div>
		
		<div class="layui-col-xs6">
			<div id="test5" class="demo-transfer"></div>
		</div>
	</div>
	<hr />
	<div class="layui-form-item">
		<div class="layui-input-block">
			<input type="hidden"  name="userlist" value="">
			<input type="hidden"  name="channel_ids" value="">
			<button class="layui-btn"  lay-submit="" lay-filter="demo1">添加</button>
		</div>
	</div>
	
</form>
<script src="__static/js/xm-select.js" charset="utf-8"></script>
{include file="common/footer" /}
<script>
    var form,layer,laydate,upload,$,transfer;
	layui.use(['form', 'layedit', 'laydate','upload','transfer'], function(){
		  form = layui.form ,layer = layui.layer, laydate = layui.laydate,upload = layui.upload,$ = layui.jquery,transfer = layui.transfer;
		  laydate.render({
			    elem: '#date', //指定元素
			  });
		  //监听提交
		  form.on('submit(demo1)', function(data){
            var articleFrom = data.field;
			layer.load(1, { shade : [ 0.5, '#676a6c' ] }); 
			$.post("{:url('add_group')}?t=json",articleFrom,function(data){
				layer.closeAll();
				if (data['code'] == 1) { 
					var index1 = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
					parent.layer.close(index1); //再执行关闭 
					//父页面数据 ，重新加载
					parent.get_load(data['msg']);

				} else {
					layer.msg(data['msg'], { icon : 5 });
				}
			});
			
			return false;
          });
       
        $(function(){
            get_user();
		});
		//绑定公司人员,端口
        function get_user(){
            layer.load(1, { shade : [ 0.5, '#676a6c' ] }); 
			$.post("{:url('user_list')}?t=json",{},function(data){
				layer.closeAll();
				if (data['code'] == 1) {
					//绑定公司人员
					get_bd_user(data.data.u_list);
					//绑定公司端口
					get_bd_channel(data.data.ch_list);
				} else {
					layer.msg(data['msg'], { icon : 5 });
				}
			});
        }
        
	});
	
	function get_bd_user(da){
		transfer.render({
			elem: '#test4'
			,data: da
			,title: ['选择联系人', '选中联系人']
			,showSearch: true
			,id: 'demo1'
			,onchange: function(obj, index){
				get_data(1)
			}
		})
	}
	function get_bd_channel(da){
		transfer.render({
			elem: '#test5'
			,data: da
			,title: ['选择端口', '选中端口']
			,showSearch: true
			,id: 'demo2'
			,onchange: function(obj, index){
				get_data(2)
			}
		})
	}
    function get_data(type){
		var d = type == 1 ? 'demo1':'demo2';
        var getData = transfer.getData(d);
        var str;
        $.each(getData, function(k,v){
            if(k > 0){
                str += ','+v.value;
            }else{
                str = v.value;
            }
		})
		if(type == 1){
			$("input[name=userlist]").val(str);
		}else if(type == 2){
			$("input[name=channel_ids]").val(str);
		}
        
    }
</script>
